<template>
  <div class="" style="display:flex">
    <el-row :gutter="1" style="display:flex">
      <el-col :span="10">
        <el-card class="box-card">
          <div slot="header" class="clearfix">
            <img class="logo" :src="this.admin.avatarUrl" alt="" />
            <span class="name">
              <div style="font-size: 25px">{{ this.admin.name }}</div>
              <div>超级管理员</div>
            </span>
          </div>
          <div style="margin-top: 10px; font-size: 12px">
            上次登录时间：<span>2020/6/14</span>
          </div>
          <div style="margin-top: 20px; font-size: 12px">
            上次登录地址：<span>四川成都</span>
          </div>
        </el-card>
        <el-card class="box-card" style="height: 350px; margin-top: 20px;margin-bottom: 20px;overflow:auto;">
        <Doctor></Doctor>
          <!-- <el-table :data="tableData" size="mini">
            <el-table-column label="日期" width="180">
              <template slot-scope="scope">
                <i class="el-icon-time"></i>
                <span style="margin-left: 10px">{{ scope.row.date }}</span>
              </template>
            </el-table-column>
            <el-table-column label="姓名" width="180">
              <template slot-scope="scope">
                <el-popover trigger="hover" placement="top">
                  <p>姓名: {{ scope.row.name }}</p>
                  <p>住址: {{ scope.row.address }}</p>
                  <div slot="reference" class="name-wrapper">
                    <el-tag size="medium">{{ scope.row.name }}</el-tag>
                  </div>
                </el-popover>
              </template>
            </el-table-column>
            <el-table-column label="操作">
              <template slot-scope="scope">
                <el-button
                  size="mini"
                  type="danger"
                  @click="handleDelete(scope.$index, scope.row)"
                  >删除</el-button
                >
              </template>
            </el-table-column>
          </el-table> -->
        </el-card>
      </el-col>
      <el-col :span="13" class="sp" style="min-width: 400px;">
        <el-card   style="height: 240px; width: 700px;">
          <div ref="main" style="height: 240px; width: 700px"></div>
        </el-card>
        <el-card   style="height: 350px;; width: 700px ;margin-top: 20px">
          <div ref="mmm" style="height: 240px; width: 700px;"></div>
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import * as echarts from 'echarts/core'
import { GridComponent } from 'echarts/components'
import { LineChart, BarChart } from 'echarts/charts'
import { UniversalTransition } from 'echarts/features'
import { CanvasRenderer } from 'echarts/renderers'
import Doctor from '../hospital/doctor/index.vue'
import { homeone } from '@/api/home'
echarts.use([GridComponent, BarChart, CanvasRenderer, LineChart, UniversalTransition])
export default {
  data() {
    return {
      currentDate: new Date(),
      x: '',
      y: '',
      x1: '',
      y1: '',
    }
  },
  methods: {
    handleEdit(index, row) {
      console.log(this.admin)
    },
    handleDelete(index, row) {
      console.log(index, row)
    },
  },
  computed: {
    admin() {
      return this.$store.state.admin.data
    },
  },
  mounted() {
  },
  async created() {
    const data = await homeone()
    console.log()
    console.log('dasdas', data.registration)
    this.x = data.deposits.map((item) => {
      return item.date
    })
    this.y = data.deposits.map((item) => {
      return item.value
    })
    this.x1 = data.registration.map((item) => {
      return item.date
    })
    this.y1 = data.registration.map((item) => {
      return item.value
    })
    this.$nextTick(() => {
      const myChart = echarts.init(this.$refs.main)
      this.$nextTick(() => {
        myChart.setOption({
          xAxis: {
            type: 'category',
            data: this.x,
          },
          yAxis: {
            type: 'value',
          },
          series: [
            {
              data: this.y,
              type: 'line',
            },
          ],
        })
      })
      const myChart1 = echarts.init(this.$refs.mmm)
      const option1 = {
        xAxis: {
          type: 'category',
          data: [...this.x1],
        },
        yAxis: {
          type: 'value',
        },
        series: [
          {
            data: this.y1,
            type: 'bar',
            showBackground: true,
            backgroundStyle: {
              color: 'rgba(180, 180, 180, 0.2)',
            },
          },
        ],
      }
      myChart1.setOption(option1)
    })
    console.log('x', this.x)
  },
  components: { Doctor },
}
</script>

<style lang="scss" scoped>
::v-deep .el-col-14{
 width: auto !important;
 min-width: 400px;
 overflow: auto;
}
.colone {
  display: flex;
  justify-content: space-between;
}
.text {
  font-size: 14px;
}

.item {
  margin-bottom: 18px;
}

.clearfix:before,
.clearfix:after {
  display: table;
  content: "";
}
.clearfix:after {
  clear: both;
}

.box-card {
  width: 480px;
}
.logo {
  width: 100px;
  height: 100px;
  border-radius: 50%;
  // vertical-align: middle;
  margin-right: 50px;
  float: left;
}
.name {
  float: right;
  vertical-align: middle;
  margin-right: 20%;
  margin-top: 8%;
}

.bottom {
  margin-top: 13px;
  line-height: 12px;
}

.button {
  padding: 0;
  float: right;
}

.image {
  width: 80px;
  height: 80px;
  display: block;
  margin: auto;
}

.clearfix:before,
.clearfix:after {
  display: table;
  content: "";
}

.clearfix:after {
  clear: both;
}
.text {
    font-size: 14px;
  }

  .item {
    padding: 18px 0;
  }

  .box-card {
    width: 480px;
  }
  ::v-deep .el-table{
    margin-left: -60px;
  }
</style>
